<template>
	<div id='newApp'>
		<div class="breadcrumb">
			<img src="../../../../static/img/appoinment_1.png" class="head_img">
			<span class="title" @click="cancel()">体测设置</span>/ {{actionText}}
		</div>

		<div class="list">
			<div class="list_head">
				<span class="head_name">新增体测</span>
				<el-button class="save" type="primary" @click="save()">保存</el-button>
				<el-button class="cancel" type="primary" @click="cancel()">返回</el-button>
			</div>
			<el-form ref="appForm" :model="appForm" inline-message="true" label-position="left" :rules="rules" label-width="85px">
				<el-form-item label="标题:" prop="title" style="margin-top:20px;">
					<el-input v-model="appForm.title" placeholder="请输入标题，不超过20个字符" class="el-input1"></el-input>
				</el-form-item>
				<el-form-item label="开始时间:" required>
					<el-form-item prop="startTime" class="time">
						<el-date-picker v-model="appForm.startTime" format="yyyy/MM/dd" placeholder="yyyy/MM/dd" class="qizhiDate"></el-date-picker>
					</el-form-item>
					至
					<el-form-item prop="endTime" class="time">
						<el-date-picker v-model="appForm.endTime" class="qizhiDate" format="yyyy/MM/dd" placeholder="yyyy/MM/dd"></el-date-picker>
					</el-form-item>
				</el-form-item>
				<div class="form-project" style="margin-top:20px;">
					<div class="form-project-title">
						<span>项目设置</span>
					</div>
					<div class="form-project-content">
						<div style="margin-top:20px;height:36px;width:500px;">
							<span class="form_title">项目名称</span>
							<span class="form_title form_t">每组测试人数</span>
						</div>
						<el-form-item label="身高体重" inline-message="true" label-width="180px" prop="heightWeight">
							<el-input v-model="appForm.heightWeight" type="number" class="el-input1"></el-input>
						</el-form-item>
						<el-form-item label="肺活量" label-width="180px" prop="vitalCapacity">
							<el-input v-model="appForm.vitalCapacity" type="number" class="el-input1"></el-input>
						</el-form-item>
						<el-form-item label="立定跳远" label-width="180px" prop="standinglongjump">
							<el-input v-model="appForm.standinglongjump" type="number" class="el-input1"></el-input>
						</el-form-item>
						<el-form-item label="坐位体前屈" label-width="180px" prop="sitandreach">
							<el-input v-model="appForm.sitandreach" type="number" class="el-input1"></el-input>
						</el-form-item>
						<el-form-item label="引体向上（男）" label-width="180px" prop="pullUp">
							<el-input v-model="appForm.pullUp" type="number" class="el-input1"></el-input>
						</el-form-item>
						<el-form-item label="一分钟仰卧起坐（女）" label-width="180px">
							<el-input v-model="appForm.sitandup" type="number" class="el-input1"></el-input>
						</el-form-item>
						<el-form-item label="50米跑" prop="run50" label-width="180px">
							<el-input v-model="appForm.run50" type="number" class="el-input1"></el-input>
						</el-form-item>
						<el-form-item label="800米跑（女）" prop="run800" label-width="180px">
							<el-input v-model="appForm.run800" type="number" class="el-input1"></el-input>
						</el-form-item>
						<el-form-item label="1000米跑（男）" prop="run1000" label-width="180px">
							<el-input v-model="appForm.run1000" type="number" class="el-input1"></el-input>
						</el-form-item>
						<span style="color:red;">提示：</span>
						<div class="prompt">
							<span>1、设置体测项目，导入体测预约数据时，将根据设置的体测项目名称进校验，即导入体测项目名称需和这里设置项目名称一致</span>
							<br>
							<span>2、设置每组测试人数，方便在手机端录入成绩</span>
						</div>
					</div>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			let checkTitle = (rule, value, callback) => {
				value = value.trim();
				if (value) {
					callback();
				} else {
					callback(new Error("标题不能为空或空格"));
				}
			};
			let checkStartTime = (rule, value, callback) => {
				if (value) {
					let startTime = new Date(this.appForm.startTime).getTime();
					let endTime = new Date(this.appForm.endTime).getTime();
					if (startTime > endTime) {
						callback(new Error("请正确填写体测时间"));
					} else {
						callback();
					}
				} else {
					callback();
				}
			};
			let checkEndTime = (rule, value, callback) => {
				if (value) {
					let startTime = new Date(this.appForm.startTime).getTime();
					let endTime = new Date(this.appForm.endTime).getTime();
					if (startTime > endTime) {
						callback(new Error("请正确填写体测时间"));
					} else {
						callback();
					}
				} else {
					callback();
				}
			};
			let checkNumber = (rule, value, callback) => {
				if (value) {
					if (Number(value) <= 0) {
						callback(new Error("请填写正整数"));
					} else {
						if (Math.floor(Number(value)) === Number(value)) {
							callback();
						} else {
							callback(new Error("请填写正整数值"));
						}
					}
				} else {
					callback(new Error("请填写测试人数"));
				}
			};
			return {
				actionText: "新增",
				physicaltestid: "",
				appForm: {
					title: "",
					startTime: "",
					endTime: "",
					heightWeight: 1,
					vitalCapacity: 2,
					standinglongjump: 1,
					sitandreach: 2,
					pullUp: 2,
					sitandup: 2,
					run50: 2,
					run800: 10,
					run1000: 10
				},
				rules: {
					title: [
						{ required: true, message: "请输入标题", trigger: "blur" },
						{ min: 1, max: 20, message: "不超过20个字符", trigger: "blur" },
						{ validator: checkTitle }
					],
					startTime: [
						{
							type: "date",
							required: true,
							message: "请选择开始时间",
							trigger: "change"
						},
						{ validator: checkStartTime },
						{ validator: checkEndTime }
					],
					endTime: [
						{
							type: "date",
							required: true,
							message: "请选择结束时间",
							trigger: "change"
						},
						{ validator: checkStartTime },
						{ validator: checkEndTime }
					],
					heightWeight: [
						{ required: false, validator: checkNumber, trigger: "blur" }
					],
					vitalCapacity: [
						{ required: false, validator: checkNumber, trigger: "blur" }
					],
					standinglongjump: [
						{ required: false, validator: checkNumber, trigger: "blur" }
					],
					sitandreach: [
						{ required: false, validator: checkNumber, trigger: "blur" }
					],
					pullUp: [{ required: false, validator: checkNumber, trigger: "blur" }],
					sitandup: [
						{ required: false, validator: checkNumber, trigger: "blur" }
					],
					run50: [{ required: false, validator: checkNumber, trigger: "blur" }],
					run800: [{ required: false, validator: checkNumber, trigger: "blur" }],
					run1000: [{ required: false, validator: checkNumber, trigger: "blur" }]
				}
			};
		},
		computed: mapState({ user: state => state.user }),
		mounted() {
			this.physicaltestid = this.$util.getUrlParam("physicaltestid");
			if (this.physicaltestid) {
				this.actionText = "编辑";
			}
			this.getDetail();
		},
		methods: {
			// 保存
			save() {
				let url = this.$util.domain + "/physicaltest/editphysicaltest";

				this.$refs.appForm.validate(valid => {
					if (valid) {
						this.$http({
							url,
							method: "POST",
							body: JSON.stringify({
								run50: this.appForm.run50,
								pullUp: this.appForm.pullUp,
								run800: this.appForm.run800,
								run1000: this.appForm.run1000,
								name: this.appForm.title.trim(),
								sitandup: this.appForm.sitandup,
								sitandreach: this.appForm.sitandreach,
								heightWeight: this.appForm.heightWeight,
								vitalCapacity: this.appForm.vitalCapacity,
								id: parseInt(this.physicaltestid) || null,
								standinglongjump: this.appForm.standinglongjump,
								endTime: new Date(new Date(this.appForm.endTime).format("yyyy/MM/dd 23:59:59")).getTime(),
								startTime: new Date(new Date(this.appForm.startTime).format("yyyy/MM/dd 00:00:00")).getTime()
							})
						}).then(response => {
							if (response.data.error == 10000) {
								this.$util.successMsg("保存成功");
								location.href = "/#/history";
							} else {
								this.$util.errorMsg(response.data.message);
							}
						}, (response) => {
							this.$util.errorMsg(response.data.message);
						});
					}
				});
			},
			//获取编辑体测数据
			getDetail() {
				let url = this.$util.domain + "/physicaltest/physicaltestdetails";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						physicalTestId: this.physicaltestid || -1
					})
				}).then((response) => {
					if (response.data.error == 10000) {
						let dataObj = response.data.data;
						if (dataObj) {
							let $name = dataObj.name,
								$startTime = new Date(dataObj.startTime),
								$endTime = new Date(dataObj.endTime),
								$heightWeight = dataObj.heightWeight,
								$vitalCapacity = dataObj.vitalCapacity,
								$standinglongjump = dataObj.standinglongjump,
								$sitandreach = dataObj.sitandreach,
								$pullUp = dataObj.pullUp,
								$sitandup = dataObj.sitandup,
								$run50 = dataObj.run50,
								$run800 = dataObj.run800,
								$run1000 = dataObj.run1000;
							if (!this.physicaltestid) {
								$name = "";
								$startTime = "";
								$endTime = "";
							}
							this.appForm = {
								title: $name,
								startTime: $startTime,
								endTime: $endTime,
								heightWeight: $heightWeight,
								vitalCapacity: $vitalCapacity,
								standinglongjump: $standinglongjump,
								sitandreach: $sitandreach,
								pullUp: $pullUp,
								sitandup: $sitandup,
								run50: $run50,
								run800: $run800,
								run1000: $run1000
							};
						}
					}
				});
			},
			//取消
			cancel() {
				location.href = "/#/history";
			}
		}
	};
</script>

<style scoped>
	#newApp {
		padding-top: 80px;
		height: calc(100% - 100px);
	}

	.title {
		color: #0398ff;
	}

	.list {
		padding-bottom: 80px;
	}

	.form_title {
		float: left;
		width: 180px;
		background: #f7f7f8;
	}

	.form_t {
		width: 260px;
	}

	.form-project-title {
		float: left;
		vertical-align: middle;
		font-size: 14px;
		color: #48576a;
		line-height: 1;
		padding: 11px 12px 11px 0;
		box-sizing: border-box;
	}

	.form-project-content {
		line-height: 36px;
		position: relative;
		font-size: 14px;
		margin-left: 90px;
	}

	.form-project-title>span::before {
		content: "*";
		color: #ff4949;
		margin-right: 4px;
	}

	#newApp .el-input1 {
		display: inline-block;
		width: 250px;
	}

	.time {
		display: inline-block;
		width: 15%;
		min-width: 150px;
	}

	#newApp .qizhiDate {
		display: inline-block;
		width: 100%;
	}

	.prompt {
		font-size: 14px;
		line-height: 16px;
		color: #999999;
	}
</style>